<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 
        @click 就是一种 Vue 提供的 模板语法，该语法的作用就是给当前元素绑定了一个 点击事件。事件处理函数为 methods 中定义的 fn1 函数
       -->
      <button id="btn" @click="fn1">点击，渲染数据</button>

      <hr />
      <!-- 
        :class 也是一个 Vue 中新的 模板语法，用于动态绑定 class
          value 值 写的是一个对象，
          对象的key: 表示当前元素需要携带的 class 类名
          对象的value: 表示该 class 类名，是否需要携带
        
       -->
      <button
        class="button"
        :class="{ active: curTabName === 'Tab1' }"
        @click="fn2('Tab1')"
      >
        Tab1
      </button>
      <button
        class="button"
        :class="{ active: curTabName === 'Tab2' }"
        @click="fn2('Tab2')"
      >
        Tab2
      </button>
      <button
        class="button"
        :class="{ active: curTabName === 'Tab3' }"
        @click="fn2('Tab3')"
      >
        Tab3
      </button>

      <ul id="box">
        <!-- 
          v-for="item in list"
            1. 一种新语法，作用是，循环 list 这个数据，要创建 li
            2. list 是在  data 选项中，定义的 数据
            3. item 是 针对该 list 数据，每一项的内容的定义

          {{ item }}
            1. 一种新语法，作用是 输出 item 的内容
         -->
        <li v-for="item in list">{{ item }}</li>
      </ul>
    </div>

    <!-- 引入 Vue2 类库 
      1. 类似与 jquery , 引入之后，全局 window 上就有了一个 Vue 对象
    -->
    <script src="../lib/vue-2.js"></script>
    <script>
      // Vue2 起步的代码， new Vue
      new Vue({
        // 配置项

        // 挂载点元素，指定 页面上那个区域由 Vue 来控制
        el: "#app",

        // 定义 数据
        data: {
          list: [],

          // 定义当前高亮的按钮的名字
          curTabName: "Tab3",
        },

        // 定义 函数
        methods: {
          fn1: function () {
            console.log("fn1");
            // 修改数据，数据的变化就能引起页面的更新， 通过 this 可以获取到当前的 Vue 实例对象
            // console.log(this);
            this.list.push(...["Apple", "Banana", "Orange"]);
          },

          fn2: function (text) {
            console.log("fn2");
            // 修改数据
            this.curTabName = text;
          },
        },
      });
    </script>
  </body>
</html>
